<template>
  <!-- 验收维护列表 -->
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        ref="search"
        :formProp="formData"
        @search="search"
        :isShowSearch="isShowSearch"
        class="ccui-highsearch"
        :selectClear="true"
      >
        <div class="ccui-tab-wrapper">
          <el-button type="table-top-active" size="mini"
            >全部 ({{ page.total }})</el-button
          >
        </div>
        <el-export-button
          class="export-button"
          @export-excel="handlExport"
          @export-pdf="exportPdf"
          style="display: inline-block; position: absolute; right: 0; top: 0"
        ></el-export-button>

        <template slot="search">
          <el-input
            v-model="formData.acceptanceName"
            clearable
            searchLabel="验收单名称"
            @blur="handleTrim('acceptanceName')"
            placeholder="请输入验收单名称模糊查询"
          ></el-input>
          <el-input
            v-model="formData.acceptanceNumber"
            clearable
            @blur="handleTrim('acceptanceNumber')"
            searchLabel="验收单编号"
            placeholder="请输入验收单编号模糊查询"
          ></el-input>
          <!-- <el-input
            v-model="formData.orderNumber"
            clearable
            searchLabel="订单编号"
            placeholder="请输入订单编号模糊查询"
          ></el-input> -->
          <el-input
            @blur="handleTrim('reportInOrgName')"
            v-model="formData.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
          ></el-input>
          <el-input
            v-model="formData.categoryName"
            clearable
            searchLabel="分类名称"
            placeholder="请输入分类名称模糊查询"
            @blur="handleTrim('categoryName')"
          ></el-input>
          <el-input
            v-model="formData.supplier"
            clearable
            searchLabel="供应商名称"
            placeholder="请输入供应商名称模糊查询"
            @blur="handleTrim('supplier')"
          ></el-input>
          <el-input
            v-model="formData.acceptor"
            @blur="handleTrim('acceptor')"
            clearable
            searchLabel="验收人"
            placeholder="请输入验收人模糊查询"
          ></el-input>
          <!-- <el-select
            v-model="formData.acceptanceTypeCode"
            clearable
            searchLabel="验收类型"
            class="ccui-form-longInput"
            placeholder="请选择验收类型查询"
            slot="searchItem3"
          >
            <el-option
              v-for="(item, index) in basuomList"
              :key="index"
              :label="item.dicValue"
              :value="item.dicKey"
            ></el-option>
          </el-select> -->
        </template>
        <!-- 表单高级搜索 -->
        <el-input
          v-model="formData.acceptanceName"
          @blur="handleTrim('acceptanceName')"
          clearable
          searchLabel="验收单名称"
          placeholder="请输入验收单名称模糊查询"
          slot="searchItem1"
        ></el-input>
        <el-input
          v-model="formData.acceptanceNumber"
          @blur="handleTrim('acceptanceNumber')"
          clearable
          searchLabel="验收单编号"
          placeholder="请输入验收单编号模糊查询"
          slot="searchItem2"
        ></el-input>
        <!-- <el-input
          v-model="formData.orderNumber"
          clearable
          searchLabel="订单编号"
          placeholder="请输入订单编号模糊查询"
          slot="searchItem3"
        ></el-input> -->
        <el-input
          @blur="handleTrim('reportInOrgName')"
          v-model="formData.reportInOrgName"
          clearable
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
          slot="searchItem4"
        ></el-input>
        <el-input
          v-model="formData.categoryName"
          @blur="handleTrim('categoryName')"
          clearable
          searchLabel="分类名称"
          placeholder="请输入分类名称模糊查询"
          slot="searchItem5"
        ></el-input>
        <el-input
          v-model="formData.supplier"
          @blur="handleTrim('supplier')"
          clearable
          searchLabel="供应商名称"
          placeholder="请输入供应商名称模糊查询"
          slot="searchItem6"
        ></el-input>
        <el-input
          @blur="handleTrim('acceptor')"
          v-model="formData.acceptor"
          clearable
          searchLabel="验收人"
          placeholder="请输入验收人模糊查询"
          slot="searchItem7"
        ></el-input>
        <!-- <el-select
          v-model="formData.acceptanceTypeCode"
          clearable
          searchLabel="验收类型"
          class="ccui-form-longInput"
          placeholder="请选择验收类型查询"
          slot="searchItem8"
        >
          <el-option
            v-for="(item, index) in basuomList"
            :key="index"
            :label="item.dicValue"
            :value="item.dicKey"
          ></el-option>
        </el-select> -->
      </el-search>
    </div>

    <!-- 表格数据 -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :cell-style="cellStyle"
        :fit="true"
        border
        class="ccui-multifunctional-table"
        @cell-click="cellClick"
      >
        <el-table-column type="index" width="60" label="序号" fixed>
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
          >
            <template slot-scope="scope">
              {{ scope.row[table.prop] }}
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="ccui-table-footer" v-show="page.total > 0">
      <div id="ccui-paging">
        <el-pagination
          :total="page.total"
          :page-size="page.pagesize"
          :current-page="page.pageNo"
          :page-sizes="[10, 20, 50, 100, 200, 500]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          popper-class="ccui-paging-page-size-popper"
          @prev-click="handlePrev"
          @next-click="handleNext"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { detailExport } from "@/basa/api";
import { exportData } from "@/basa/utils/public";
import { listPageAcceptanceCertParameter } from "../api/index";
import { formatNumber } from "@/basa/utils";

// 表头
const tableColumnData = [
  {
    label: "验收单编号",
    prop: "acceptanceNumber",
    width: "150",
    fixed: true
  },
  {
    label: "验收单名称",
    prop: "acceptanceName",
    width: "130"
  },

  {
    label: "填报单位",
    prop: "reportInOrgName",
    width: "200"
  },
  {
    label: "供应商",
    prop: "supplier",
    width: "200"
  },
  {
    label: "合同编号",
    prop: "contractNumber",
    width: "130"
  },
  // {
  //   label: "合同名称",
  //   prop: "orderName",
  //   width: "130"
  // },
  {
    label: "分类名称",
    prop: "categoryName",
    width: "100"
  },

  {
    label: "验收人",
    prop: "acceptor",
    width: "100"
  },

  {
    label: "验收数量",
    prop: "acceptanceCurrentNumber",
    width: "80"
  },

  {
    label: "实际验收数量",
    prop: "currentAcceptanceEndNumber",
    width: "80"
  },
  {
    label: "退货数量",
    prop: "bowOutCurrentNumber",
    width: "80"
  },
  {
    label: "状态",
    prop: "submitStatus",
    width: "80"
  }
];
export default {
  data() {
    return {
      // 表头
      tableColumnData,
      // 表格数据
      tableData: [],
      // 搜索框
      formData: {},
      // 搜索组件是否展开
      isShowSearch: true,
      searchValue: {},
      // 分页
      page: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      // 验收类型
      basuomList: [
        {
          dicValue: "按发货单验收",
          dicKey: "1"
        },
        {
          dicValue: "按订单验收",
          dicKey: "2"
        },
        {
          dicValue: "按合同验收",
          dicKey: "3"
        }
      ]
    };
  },
  activated() {
    this.getlist();
  },
  methods: {
    // 搜索
    search(searchVal) {
      let obj = JSON.parse(JSON.stringify(searchVal));
      obj.submitStatus = obj.submitStatus * 1;
      this.searchValue = obj;
      this.page.pageNo = 1;
      this.getlist();
    },
    // 根据返回状态显示不同的文字颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (["acceptanceNumber"].includes(column.property)) {
        return { color: "#0089EF", cursor: "pointer" };
      }
    },
    // 单元格点击
    cellClick(r, column) {
      if (column.label === "验收单编号") {
        this.$router.push({
          path: `/checkManagement/equipAcceptanceAccount/detail`,
          query: { status: "查看", id: r.id }
        });
      }
    },
    // 获取列表数据
    getlist() {
      listPageAcceptanceCertParameter({
        ...this.page,
        ...this.searchValue,
        businessType: "3"
      }).then(res => {
        const { pageNo, rows, recordsTotal } = res.data.data;
        this.page.pageNo = pageNo;
        this.page.total = recordsTotal;
        rows.forEach(item => {
          item.submitStatus = item.submitStatus === 0 ? "待提交" : "已提交";

          item.bowOutCurrentNumber = formatNumber(item.bowOutCurrentNumber, 3);
          item.currentAcceptanceEndNumber = formatNumber(
            item.currentAcceptanceEndNumber,
            3
          );
          item.acceptanceCurrentNumber = formatNumber(
            item.acceptanceCurrentNumber,
            3
          );
        });
        this.tableData = rows;
      });
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.formData,
        key,
        this.formData[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    // 上一页
    handlePrev(val) {
      this.page.pageNo = val;
      this.getlist();
    },
    // 下一页
    handleNext(val) {
      this.page.pageNo = val;
      this.getlist();
    },
    // 展示条数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getlist();
    },
    // 页码点击事件
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getlist();
    },
    //导出全部
    exportPdf() {
      detailExport({
        // ...this.deviceList,
        // ...this.page,
        pageNo: 1,
        pageSize: 3000,
        ...this.searchValue,
        // ...this.listLoadingParams,
        type: "acceptancecert/accountExportEquip",
        businessType: "3"
      }).then(res => {
        exportData(res);
      });
    },

    //导出当前
    handlExport() {
      detailExport({
        // ...this.deviceList,
        ...this.page,
        ...this.searchValue,
        // ...this.listLoadingParams,
        type: "acceptancecert/accountExportEquip",
        businessType: "3"
      }).then(res => {
        exportData(res);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-search .el-searchs-box {
  margin-right: 70px;
}

/deep/.ccui-multifunctional-table {
  .el-table__fixed-right,
  .el-table__fixed {
    height: 100% !important;
  }
}

.ccui-table-footer {
  height: 20px;
}
</style>
